<template>
	<div class="layout-pd">
		<el-card>
                <el-row :gutter="20">
                    <el-col :span="6">  <el-input placeholder="用户名称" v-model="rolename"></el-input></el-col>
                    <el-col :span="2"> <el-button type="primary" @click="searchList">搜索</el-button></el-col>
					<el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6"> <el-button type="primary" @click="Add">添加</el-button></el-col>
                </el-row>
		
				<div class="el-table">
					<el-table :data="tableData" style="width: 100%">
						<el-table-column type="index" width="50" />
						<el-table-column prop="roleName" label="用户名称" width="180" />
						<el-table-column prop="roleCode" label="用户岗位" min-width="180" />
						
						<el-table-column label="操作"  >
							<template #default="{ row }">
								<el-button size="small"
								@click="roleUp(row)"
								>修改</el-button>
								<el-button size="small" type="danger"
								@click="roledel(row)"
								>删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="el-page">
					<el-pagination layout="prev, pager, next" 
					v-model:default-current-page="currentpage"
					v-model:page-size="pageSize"
					:total="total" 
					@size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
					/>
				</div>
		</el-card>
		<diaLog ref="dialogRef" @updateList="searchList"></diaLog>
	</div>
</template>

<script setup>
import { onMounted, reactive, toRefs,ref } from "vue";
import {roleList,roleDel} from '/@/api/user/index'
import  diaLog from './compont/index.vue'
const dialogRef=ref(null)
const state=reactive({
	currentpage:1,
	pageSize:10,
	rolename:"",
	total:0,
	tableData:[]
})
const handleSizeChange = () => {
  searchList()
}
const handleCurrentChange = () => {
  searchList()
}
const searchList=()=>{
    roleList(state.currentpage,state.pageSize,state.rolename).then((res)=>{
	state.tableData=res.list
	state.total=res.total
	})
}
const Add=()=>{
	dialogRef.value.open('add')
}

const roleUp=(row)=>{
	dialogRef.value.open('update',row)
}
const roledel=(row)=>{
roleDel(row.id).then(()=>{
		searchList()
})
}

const {currentpage,pageSize,rolename,tableData}  = toRefs(state)

onMounted(()=>{
	searchList()
})
</script>

<style lang="scss" scoped>
@import '../../theme/mixins/index.scss';

.el-table {
	padding: 10px 0 0 0;
}
.el-page {
	padding: 20px 0 0 0;
	display: flex;
	align-items: center;
}
</style>